<template>
	<view class="container">
		<cu-custom  :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				设置
			</block>
		</cu-custom>
		
		<view class="page-form">
			<u-form :model="formData" ref="uForm" :border-bottom="false" :label-style="{fontSize:'30rpx'}">

				<u-form-item label-width="260" label="自动拨打号码方式" prop="" required >

				</u-form-item>
				
				<u-form-item label-width="260" label="" prop="call_type" >
					<view>
						<radio-group @change="radioChange">
							<label class="radio" v-for="(item,index) in callTypeData" :key="index" style="margin-right:30rpx;">
								<radio :value="item.value" :checked="index === currentCallType" style="transform:scale(0.7)" /> {{item.text}}
							</label>
						</radio-group>
					</view>

				
				</u-form-item>
				
				<u-form-item  label="" prop="" style="height:300rpx">

					<view class="content_des" style="color:#989898;font-size:30rpx;">{{currentContent}}</view>
				
				</u-form-item>

				<u-button @click="submitForm" type="primary"
					style="margin-top: 35px;">提交</u-button>
			</u-form>
			<u-top-tips ref="uTips"></u-top-tips>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	
	import {
		updateSeatCallType,
		getSeatInfo
	} from '@/api/auth.js';
	
	import {
		mapState,
		mapGetters
	} from "vuex";
	
	import DB from "@/utils/sqlite.js";

	export default {
		data() {
			return {
				formData: {
					call_type:0
				},
				callTypeData: [{
					text: '自动',
					value: 0,
					content:"自动拨打拨号盘中的号码，如手机是双卡，如未在手机系统中设置默认拨号卡，则无法实现自动拨号。"
				}, {
					text: '手动',
					value: 1,
					content:"手动模式则直接跳转到手机拨号盘，需要手动外呼。"
				}],
				
				currentCallType: 0,
				currentContent:"自动拨打拨号盘中的号码，如手机是双卡，如未在手机系统中设置默认拨号卡，则无法实现自动拨号。",
				
				currentData:{},

				rules: {},

			}
		},
		computed: {
			...mapGetters(["userInfo","callType"]),
			...mapState({
				callType: state => state.app.callType
			} )
		},
		onLoad(option) {

		},
		onShow() {
			this.getCallConfig();
			
			this.currentCallType = this.callType;
		},
		methods: {
			getCallConfig(){
				// let open = DB.isOpen();
				// if (open) {
				//     // 查询表 DB.selectTableData(表名,查询条件列名,查询条件列值)
				//     DB.selectTableData('call_config','field_name','call_type','seat_id',this.userInfo.id).then((res) => {
				//         console.log('call_config表数据', res);
						
				// 		this.currentData = res[0];
						
						
				//     }).catch((error) => {
				//         console.log('查询失败', error);
				//     })
				// } else {
				//     console.log('数据库未打开');
				// }
				
				getSeatInfo({seatId:this.userInfo.id}).then(res=>{
					this.currentData = res.data;
				});
			},
			
			submitForm() {
				let that = this;
				
				updateSeatCallType({'id':this.userInfo.id,'call_type':that.formData.call_type}).then(res=>{					
					//修改callType
					that.$store.dispatch("setCallType",that.formData.call_type);
					
					that.$refs.uToast.show({
						title: "操作成功",
						type: 'success',
						message:"配置修改成功",
						duration: 2000,
						url:'/pages/index/tabbar'
					})
				});
			},

			radioChange(evt) {
				for (let i = 0; i < this.callTypeData.length; i++) {
					if (this.callTypeData[i].value === evt.detail.value) {
						this.currentCallType = i;
						this.currentContent = this.callTypeData[i].content;
						this.formData.call_type = this.callTypeData[i].value;
						break;
					}
				}
			}
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
.container {
	width: 100%;
	color: #333333;
	background-image: linear-gradient(to bottom, #075AFF, #ffffff);
	background-size: 100% 45%;
	background-repeat: no-repeat;
	background-position: top center;
	overflow-y: scroll;
}
</style>